<style src="./index.scss" lang="scss" scoped></style>
<template>
    <div class="api-list__box" ref="boxRef" :style="apiStyle" :class="{fixed: isFixed, move: isMouseDown}">
        <div class="api-list__box-icon">
            <svg viewBox="0 0 1024 1024">
                <path d="M1004.470857 8.265143a45.860571 45.860571 0 0 0-47.177143-3.145143L24.722286 487.716571A45.787429 45.787429 0 0 0 25.088 569.051429l226.011429 114.102857a45.787429 45.787429 0 0 0 41.252571-81.700572L146.212571 527.798857l655.506286-339.236571c-89.892571 108.982857-222.134857 268.580571-292.425143 349.622857-106.422857 122.660571-120.758857 221.476571-120.758857 301.860571v138.24a45.714286 45.714286 0 1 0 91.428572 0v-138.24c0-62.171429 7.606857-137.289143 98.377142-241.956571 82.651429-95.305143 249.490286-297.325714 334.701715-400.822857l-85.357715 674.377143-202.825142-102.326858a45.787429 45.787429 0 0 0-41.179429 81.700572l260.608 131.437714a46.006857 46.006857 0 0 0 42.057143-0.438857 45.714286 45.714286 0 0 0 23.917714-34.596571l113.371429-896a45.641143 45.641143 0 0 0-19.163429-43.154286z" fill="#17B3A3" p-id="4366"></path>
            </svg>
        </div>
        <div class="api-list__box-info">
            <div class="api-list__box-fixed-icon" @click="toggleFixed">
                <svg viewBox="0 0 1024 1024">
                    <path d="M309.077333 630.784l84.138667 84.138667c-82.858667 70.144-203.861333 179.029333-228.778667 198.570666-63.573333 49.834667-119.808 65.877333-119.808 65.877334s16.042667-56.234667 65.877334-119.808c19.626667-24.917333 128.426667-145.92 198.570666-228.693334z m652.373334-343.04L736.341333 62.464a60.928 60.928 0 1 0-86.272 86.272l17.92 17.92-328.789333 232.277333-72.789333-72.704A60.928 60.928 0 1 0 180.053333 412.586667L611.413333 843.946667a60.928 60.928 0 1 0 86.272-86.357334l-72.704-72.704 232.192-328.789333 17.92 17.92a60.928 60.928 0 1 0 86.357334-86.186667z" p-id="5883" fill="#17B3A3"></path>
                </svg>
            </div>
            <div class="api-list__box-text is-move"
                @mousedown="onMousedown"
            >当前API:</div>
            <div class="api-list__box-text">
                <template v-if="currentApi.url">
                    <!-- <el-tooltip effect="dark" :content="currentApi.url" placement="top"> -->
                        <div class="api-list__box-text-inline" :title="currentApi.url">{{currentApi.name || "-"}}</div>
                    <!-- </el-tooltip> -->
                </template>
            </div>
            <div class="api-list__box-btn">
                <el-button type="primary" size="mini" @click="changeApi">切换API</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { apiInfoExtension } from "@/services/config";
import { Component, Vue } from "vue-property-decorator";
import { dialogForm } from "./form";
import { ObserverEvent } from "@/utils";
@Component
export default class ApiList extends Vue {
    currentApi: any = {};
    isFixed = false;
    isMove = false;
    isMouseDown = false;
    startX = 0;
    startY = 0;
    currentX = 0;
    currentY = 0;
    clientW = 0;
    clientH = 0;
    get apiStyle() {
        return this.isMove ? {
            bottom: this.currentY + "px",
            right: this.currentX + "px"
        } : {};
    }

    mounted() {
        this.currentApi = apiInfoExtension.current || {};
        this.isFixed = apiInfoExtension.fixed;
        const _drag = apiInfoExtension.drag;
        if (_drag.custom) {
            this.isMove = _drag.custom;
            this.currentX = _drag.x;
            this.currentY = _drag.y;
        }
        const resizeEvent = ObserverEvent(window, "resize", () => {
            this.setPageArea();
            this.updateCoor(() => {
                return {
                    x: this.currentX,
                    y: this.currentY
                };
            });
        });
        const mousemoveEvent = ObserverEvent(window, "mousemove", this.onMousemove);
        const mouseupEvent = ObserverEvent(window, "mouseup", this.onMouseup);
        // const mouseleaveEvent = ObserverEvent(document.body, "mouseleave", this.onMouseLeave);
        this.$on("hook:beforeDestroy", () => {
            resizeEvent.destroy();
            mousemoveEvent.destroy();
            mouseupEvent.destroy();
            // mouseleaveEvent.destroy();
        });
    }

    toggleFixed() {
        this.isFixed = !this.isFixed;
        apiInfoExtension.apiInfo = {
            ...apiInfoExtension.apiInfo,
            fixed: this.isFixed
        };
    }

    changeApi() {
        dialogForm({
            current: this.currentApi,
            sure: (vm: any, model: any) => {
                this.currentApi = model;
                apiInfoExtension.apiInfo = {
                    ...apiInfoExtension.apiInfo,
                    current: {
                        ...model
                    }
                };
                vm.close();
                window.location.reload();
            }
        });
    }

    onMousedown(event: any) {
        this.isMouseDown = true;
        this.isMove = true;
        this.setPageArea();
        const boxPadding = 10;
        this.startX = event.offsetX + boxPadding;
        this.startY = event.offsetY + boxPadding;
    }

    setPageArea() {
        const page = this._getPageArea();
        this.clientW = page.width;
        this.clientH = page.height;
    }

    _getPageArea() {
        if (document.compatMode === "BackCompat") {
            return {
                width: Math.max(document.body.scrollWidth, document.body.clientWidth),
                height: Math.max(document.body.scrollHeight, document.body.clientHeight)
            };
        } else {
            return {
                width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
                height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
            };
        }
    }

    onMousemove(event: any) {
        if (this.isMouseDown) {
            // const box = {
            //     w: 140,
            //     h: 120
            // };
            // const _currentX = Math.max(0, this.clientW - box.w - (event.pageX - this.startX));
            // const _currentY = Math.max(0, this.clientH - box.h - (event.pageY - this.startY));
            // this.currentX = Math.min(_currentX, this.clientW - box.w);
            // this.currentY = Math.min(_currentY, this.clientH - box.h);
            this.updateCoor((c: any, box: any) => {
                return {
                    x: c.w - box.w - (event.pageX - this.startX),
                    y: c.h - box.h - (event.pageY - this.startY)
                };
            });
        }
    }

    updateCoor(func: any) {
        const box = {
            w: 140,
            h: 120
        };
        const coor: any = func({ w: this.clientW, h: this.clientH }, box);
        const _currentX = Math.max(0, coor.x);
        const _currentY = Math.max(0, coor.y);
        this.currentX = Math.min(_currentX, this.clientW - box.w);
        this.currentY = Math.min(_currentY, this.clientH - box.h);
    }

    onMouseLeave() {
        this.onMouseup();
    }

    onMouseup() {
        if (!this.isMouseDown) {
            return;
        }
        this.isMouseDown = false;
        this.clientW = 0;
        this.clientH = 0;
        this.startX = 0;
        this.startY = 0;
        apiInfoExtension.apiInfo = {
            ...apiInfoExtension.apiInfo,
            drag: {
                custom: true,
                x: this.currentX,
                y: this.currentY
            }
        };
    }
}
</script>
